const path = require('path');
// 处理html的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 提取css
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
//自动删除输出目录
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin')

module.exports = {
    //入口
    entry: {
        //公共入口
        iconfont: './src/lib/iconfont/iconfonts.js', //字体图标
        commonCSS: './src/js/common/commonCSS.js', //公用css
        dom: './src/js/common/dom.js', //封装DOM操作
        http: './src/js/common/http.js', //发送请求
        captcha: './src/lib/captcha/captcha-mini.js', //验证码        
        utils: './src/js/common/utils.js', //工具函数
        swiper: './src/lib/swiper/swiper-bundle.js', //轮播

        advertising: './src/js/advertising.js',
        register: './src/js/register.js',
        login: './src/js/login.js',
        index: './src/js/index.js',
        mine: './src/js/mine.js',
        mineEdit: './src/js/mine-edit.js',
        "sports-course": './src/js/sports-course.js',
        "course-particulars": './src/js/course-particulars.js',
        "sports-data": './src/js/sports-data.js',
        "player": './src/js/player.js',
    },
    //出口
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name]-[hash:5].js',
    },

    //加载器 配置loader
    module: {
        rules: [
            //编译css
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
            //编译less
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            },
            //编译图片
            {
                test: /\.(jpg|jpeg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    //限制要处理的图片，小于10kb，就进行base64转码
                    //如果大于，就不转吗，拷贝到输出目录
                    name: '[hash:16].[ext]',
                    limit: 2 * 1024 * 1024,
                    esModule: false, //避免NodeJS和ES6模块化冲突
                }
            },
            //在html中加载img
            {
                test: /\.html$/, // 处理html中引入img
                loader: 'html-loader'
            },
            //编译字体图标
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/, // 处理字体格式文件
                loader: 'file-loader',
                options: {
                    name: '[hash:16].[ext]', // 输出名字
                    outputPath: 'fonts' // 输出路径
                }
            },
            // 编译es6到es5
            {
                test: /\.js$/,
                loader: 'babel-loader', // loader 编译es6为es5
                exclude: /node_modules/ // 排除
            },

        ]
    },
    //插件
    plugins: [
        // 处理html  把index.html复制到dist中 自动引入资源文件

        //运动数据
        new HtmlWebpackPlugin({
            template: './src/page/sports-data.html',
            filename: 'sports-data.html',
            chunks: ['sports-data', 'commonCSS', 'dom', 'http', 'utils', 'iconfont']
        }),

        //运动-课程-视频播放
        new HtmlWebpackPlugin({
            template: './src/page/player.html',
            filename: 'player.html',
            chunks: ['player', 'commonCSS', 'dom', 'http', 'utils', 'iconfont']
        }),


        //运动-课程详情
        new HtmlWebpackPlugin({
            template: './src/page/course-particulars.html',
            filename: 'course-particulars.html',
            chunks: ['course-particulars', 'commonCSS', 'dom', 'http', 'utils', 'iconfont']
        }),

        //运动-课程列表
        new HtmlWebpackPlugin({
            template: './src/page/sports-course.html',
            filename: 'sports-course.html',
            chunks: ['sports-course', 'commonCSS', 'dom', 'http', 'utils', 'iconfont']
        }),

        //我的信息修改
        new HtmlWebpackPlugin({
            template: './src/page/mine-edit.html',
            filename: 'mine-edit.html',
            chunks: ['mineEdit', 'commonCSS', 'dom', 'http', 'utils', 'iconfont']
        }),
        //我的
        new HtmlWebpackPlugin({
            template: './src/page/mine.html',
            filename: 'mine.html',
            chunks: ['mine', 'commonCSS', 'dom', 'http', 'utils', 'iconfont']
        }),
        //首页
        new HtmlWebpackPlugin({
            template: './src/page/index.html',
            filename: 'index.html',
            chunks: ['index', 'commonCSS', 'dom', 'http', 'utils', 'iconfont', 'swiper']
        }),
        //登录
        new HtmlWebpackPlugin({
            template: './src/page/login.html',
            filename: 'login.html',
            chunks: ['login', 'commonCSS', 'dom', 'utils', 'iconfont', 'http']
        }),
        //注册
        new HtmlWebpackPlugin({
            template: './src/page/register.html',
            filename: 'register.html',
            chunks: ['register', 'commonCSS', 'dom', 'utils', 'iconfont', 'captcha', 'http']
        }),
        //广告
        new HtmlWebpackPlugin({
            template: './src/page/advertising.html',
            filename: 'advertising.html',
            chunks: ['advertising', 'commonCSS', 'dom']
        }),

        new MiniCssExtractPlugin({ // 提取css
            filename: 'css/[name].css' // 重命名输出的css
        }),
        new OptimizeCssAssetsWebpackPlugin(), // 压缩css
        new CleanWebpackPlugin() //自动删除输出目录
    ],

    // 开发服务器
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
        compress: true, // 启动gzip
        port: 666, // 端口
        open: true, // 自动打开服务
        openPage: 'advertising.html', //自动打开页面
    },

    mode: 'development', //development 开发模式 production生产模式
}